<template>
  <div>
    <h3>你的角色是{{this.$store.getters.roles.join("")}} </h3>
    <h3>切换用户</h3>
    <el-button type="primary" @click="changeAdmin">admin</el-button>
  <el-button type="success"  @click="changeEditor">editor</el-button>
    <el-row :gutter="20" class="directive">
      <h3>v-if实现按钮权限</h3>
  <el-button type="primary" v-if="basePermiss('admin')">增加</el-button>
  <el-button type="success" v-if="basePermiss('admin')">删除</el-button>
  <el-button type="info">修改</el-button>
  <el-button type="warning">查看</el-button>
    </el-row>
     <el-row :gutter="20" class="directive" >
       <h3>自定义指令实现按钮权限</h3>
  <el-button type="primary" v-permit="'admin'">增加</el-button>
  <el-button type="success" v-permit="'admin'">删除</el-button>
  <el-button type="info" >修改</el-button>
  <el-button type="warning" >查看</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    // v-if 实现
    basePermiss (e) {
      return this.$store.getters.roles.includes(e)
    },
    changeAdmin () {
      this.$store.dispatch('user/login', { username: 'admin', password: 123456 }).then(() => {
        location.reload()
      })
    },
    changeEditor () {
      this.$store.dispatch('user/login', { username: 'editor', password: 1234567 }).then(() => {
        location.reload()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.directive{
  margin: 60px;
  padding-left: 60px;
}
</style>
